import React from 'react'
import {
  AppleFilled,
  AppleOutlined,
  AntDesignOutlined,
  AlibabaOutlined,
  AntCloudOutlined,
  AlipayCircleOutlined,
} from '@ant-design/icons'
import Dashboard from '../views/dashboard'
import Component from '../views/component'
import TableDemo from '../views/table-demo'
import TimeTable from '../views/time-table'

export type MenuItem = {
  key: string
  label: string
  icon?: React.ReactNode
  children?: MenuItem[]
}

export const items: MenuItem[] = [
  {
    key: 'Dashboard',
    label: 'Dashboard',
    icon: React.createElement(AntDesignOutlined),
  },
  {
    key: 'Component',
    label: 'Component',
    icon: React.createElement(AppleFilled),
  },
  {
    key: 'Settings',
    label: 'Settings',
    icon: React.createElement(AppleOutlined),
    children: [
      {
        key: 'Time',
        label: 'Time',
        icon: React.createElement(AlibabaOutlined),
      },
      {
        key: 'Config',
        label: 'Config',
        icon: React.createElement(AlipayCircleOutlined),
        children: [
          {
            key: 'Table',
            label: 'Table',
            icon: React.createElement(AntCloudOutlined),
          }
        ]
      },
    ],
  },
]

export type MenuListItem = {
  path: string
  component: React.FC
}
export const menuList = [
  { path: '/dashboard', component: Dashboard  },
  { path: '/component', component: Component  },
  { path: '/settings/time', component: TimeTable  },
  { path: '/settings/Config/Table', component: TableDemo  },
]
